<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="modalData.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>{{modalData.title}}</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              专家组名称：
            </div>
            <input type="text" maxlength="10" v-model="dataModal.groupName" placeholder="最长10个字符" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              备注：
            </div>
            <textarea maxlength="50" v-model="dataModal.comment" placeholder="最长50个字符" class="modal-text f-l"></textarea>
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeFn">取消</button>
          <button type="button" class="btn btn-info" @click="subForm">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "SpecialistArrTableModal",
        props:["modalData"],
        data(){
          return{
            dataModal:{
              "comment": "",
              "groupName": "",
              "id":"",
              "createUser": this.isLogin().userId,
            }
          }
        },
        watch:{
          modalData:{
            deep:true,
            handler(v1){
              if( v1.urlType === "updata" && v1.id !== "" && v1.isShow ){
                console.log(v1.dataObj);
                this.getFormData();
               /* for( let objKey in v1.dataObj ){
                  this.dataModal[objKey] = v1.dataObj[objKey];
                }*/
              }
            }
          }
        },
        methods:{
          //获取专家组数据
          //GET /benchmark/expertsgroup/detail
          getFormData(){
            this.$axios.get(this.HOST+"/benchmark/expertsgroup/detail",{
              params:{
                id:this.modalData.id
              }
            })
              .then(res=>{
                console.log(res);
                for( let modalKey in this.dataModal ){
                  for( let objKey in res.data ){
                    if( modalKey === objKey ){
                      this.dataModal[modalKey] = res.data[objKey];
                    }
                  }
                }

              })
              .catch(err=>{
                this.s_alert(err.response.data.errorMsg);
                console.log(err);
              })
          },
          //提交
          subForm(){
            console.log(this.modalData);
            if( this.verifyForm.isNull(this.dataModal.groupName) ){
              this.s_alert("专家组名称不能为空！");
              return false;
            }
            this.dataModal.createUser = this.isLogin().userId;

            if(this.modalData.urlType === "add"){//新增
              this.$axios.post(this.HOST+"/benchmark/expertsgroup/add",this.dataModal)
                .then(res=>{
                  this.s_alert(res.data.errorMsg);
                  this.closeFn();
                })
                .catch(err=>{
                  this.s_alert(err.response.data.errorMsg);
                  console.log(err);
                })
            }else if(this.modalData.urlType === "updata"){//修改
              //PUT /benchmark/expertsgroup/update
              this.$axios.put(this.HOST+"/benchmark/expertsgroup/update",this.dataModal)
                .then(res=>{
                  this.s_alert("修改成功！");
                  this.closeFn();
                })
                .catch(err=>{
                  this.s_alert(err.response.data.errorMsg);
                  console.log(err);
                })
            }

          },
          closeFn(){
            this.clearData();
            this.$emit("closeModal");
          },
          clearData(){
            this.dataModal={
              "comment": "",
              "groupName": "",
              "id":"",
              "createUser": ""
            }
          }
        }
    }
</script>

<style scoped>
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
